import React, { useEffect, useState } from 'react';
import { ChatFloattingButton } from './components';
import ChatPanel from './ChatPanel';
// import { EVENTS, ctx2 } from '@/Context2'
import { cadAppLog, CMEVENTS } from '@amcax/base';
import { userEvents } from '@app-base/module';

export default function AIChat() {
  const [visible, setVisible] = useState(true);
  const [show, setShow] = useState(false);

  useEffect(() => {
    userEvents.on(CMEVENTS.RIGHT_PANEL_TOGGLE, (open: boolean) => {
      setVisible(!open);
    });
  }, []);

  const showChatPanel = () => {
    setShow(true);
  };
  const handleClose = () => {
    setShow(false);
  };

  const handleMessageChange = (message: string) => {
    cadAppLog(message);
  };
  const handleMessageSend = (message: string) => {
    cadAppLog('发送消息：' + message);
  };

  return (
    <>
      {visible ? (
        <div className='ai-chat z-10'>
          {show ? (
            <ChatPanel
              onClose={handleClose}
              onMessageChange={handleMessageChange}
              onMessageSend={handleMessageSend}
            />
          ) : (
            <ChatFloattingButton onClick={showChatPanel}>
              打开聊天
            </ChatFloattingButton>
          )}
        </div>
      ) : (
        <></>
      )}
    </>
  );
}
